<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机</title>
    <style>
        .calculator{
            width: 200px;
            height: 300px;
            border: 1px solid #ccc;
            margin:0 auto;
        }
        .calculator .showguocheng{
            width: 200px;
            height: 20px;
            font-size: 12px;
            text-align: right;
            display: inline-block;
            padding: 10px 0 5px 0;
        }
        .calculator .res{
            width: 180px;
            height: 30px;
            line-height: 30px;
            text-align: right;
            border: 1px solid #ccc;
            font-size: 12px;
            margin: 0 auto 10px auto;

        }
        button{
            width: 35px;
            height: 40px;
            margin-bottom: 10px ;
        }
        .clear{
            width: 123px;
        }
        tr{

        }
    </style>
</head>
<body>
<div class="calculator">
    <span class="showguocheng" id="guocheng"></span>
    <div class="res" id="res"></div>
    <table cellpadding="0">
        <tr>
            <td><button onclick="demo(this)">7</button></td>
            <td><button onclick="demo(this)">8</button></td>
            <td><button onclick="demo(this)">9</button></td>
            <td><button onclick="demo2(this)">*</button></td>
            <td><button onclick="demo2(this)">/</button></td>
        </tr>
        <tr>
            <td><button onclick="demo(this)">4</button></td>
            <td><button onclick="demo(this)">5</button></td>
            <td><button onclick="demo(this)">6</button></td>
            <td><button onclick="demo2(this)">+</button></td>
            <td><button onclick="demo2(this)">-</button></td>
        </tr>
        <tr>
            <td><button onclick="demo(this)">1</button></td>
            <td><button onclick="demo(this)">2</button></td>
            <td><button onclick="demo(this)">3</button></td>
            <td><button onclick="eq1()">=</button></td>
            <td><button onclick="demo2(this)">/</button></td>
        </tr>
        <tr>
            <td><button onclick="demo(this)">0</button></td>
            <td><button onclick="demo(this)">.</button></td>
            <td  colspan="3"><button onclick="demo(this)" class="clear">clear</button></td>
        </tr>
    </table>
</div>
<script>
    function demo(_this){
        guocheng=document.getElementById('guocheng');
        res=document.getElementById('res');
        if(_this.innerText!=='clear'){
            guocheng.append((_this.innerText));
        }else{
            guocheng.innerText='';
            res.innerText='';
        }
    }
    function demo2(_this) {
        arr=['+','-','*','/','.'];
        guocheng=document.getElementById('guocheng');
       // alert(guocheng.innerText.charAt(guocheng.innerText.length-1));
        if (arr.indexOf(guocheng.innerText.charAt(guocheng.innerText.length-1))===-1&&(arr.indexOf(guocheng.innerText.charAt(0))===-1)){
            guocheng.append((_this.innerText));
        }

    }
    function eq1() {
        arr=['+','-','*','/','.'];
        guocheng=document.getElementById('guocheng');
        res=document.getElementById('res');
        if ((arr.indexOf(guocheng.innerText.charAt(guocheng.innerText.length-1))===-1)&&(arr.indexOf(guocheng.innerText.charAt(0))===-1)){
            res.innerText=eval(guocheng.innerText);
        }

    }
    // function eq1(){
    //
    //     guocheng=document.getElementById('guocheng');
    //     res=document.getElementById('res');
    //     if(guocheng.innerText.indexOf('+')){
    //         a=guocheng.innerText.split("+");
    //         for (i=0;i<a.length;i++) {
    //             temp=a[i];
    //             if(a[i].indexOf('*')!==-1){
    //                 x=a[i].split('*');
    //                // temp1=parseInt(x[0]);
    //                 for (j=0;j<x.length;j++){
    //                     if (x[j].indexOf('/')!==-1){
    //                         d=x[j].split('/');
    //                         ress=parseInt(d[0]);
    //                         for (p=1;p<d.length;p++){
    //                             ress/=parseInt(d[p]);
    //                         }
    //                         x[j]=ress;
    //
    //                     }
    //
    //                 }
    //                // alert(x);
    //                 tmpx=1;
    //                 for(j=0;j<x.length;j++){
    //                     if(guocheng.innerText.indexOf('.')){
    //                         x[j]=parseFloat(x[j]);
    //                     }else{
    //                         x[j]=parseInt(x[j]);
    //                     }
    //                     tmpx*=x[j];
    //                 }
    //
    //                 temp=tmpx;
    //
    //         }else if(a[i].indexOf('/')!==-1){
    //                 x=a[i].split('/');
    //                 tmpx=x[0];
    //                 for(j=1;j<x.length;j++){
    //                     if(guocheng.innerText.indexOf('.')){
    //                         x[j]=parseFloat(x[j]);
    //                     }else{
    //                         x[j]=parseInt(x[j]);
    //                     }
    //                     tmpx/=x[j];
    //                 }
    //                 temp=tmpx;
    //             }
    //             if(a[i].indexOf('-')!==-1){
    //                 x=a[i].split('-');
    //                 tmpx=parseInt(x[0])-parseInt(x[1]);
    //                 temp=tmpx;
    //             }
    //         a[i]=temp;
    //         }
    //         //alert(a);
    //         re=0;
    //         for (i=0;i<a.length;i++){
    //             if(guocheng.innerText.indexOf('.')){
    //                 a[i]=parseFloat(a[i]);
    //             }else{
    //                 a[i]=parseInt(a[i]);
    //             }
    //             re+=a[i];
    //         }
    //         res.innerText=re;
    //     }else if(guocheng.innerText.indexOf('-')){
    //         a=guocheng.innerText.split("-");
    //         for (i=0;i<a.length;i++) {
    //             if(a[i].indexOf('*')!==-1){
    //                 x=a[i].split('*');
    //                 tmpx=1;
    //                 for(j=0;j<x.length;j++){
    //                     if(guocheng.innerText.indexOf('.')){
    //                         x[j]=parseFloat(x[j]);
    //                     }else{
    //                         x[j]=parseInt(x[j]);
    //                     }
    //                     tmpx*=x[j];
    //                 }
    //                 temp=tmpx;
    //             }
    //             if(a[i].indexOf('/')!==-1){
    //                 x=a[i].split('*');
    //                 tmpx=1;
    //                 for(j=0;j<x.length;j++){
    //                     if(guocheng.innerText.indexOf('.')){
    //                         x[j]=parseFloat(x[j]);
    //                     }else{
    //                         x[j]=parseInt(x[j]);
    //                     }
    //                     tmpx/=x[j];
    //                 }
    //                 temp=tmpx;
    //             }
    //             if(a[i].indexOf('+')!==-1){
    //                 x=a[i].split('+');
    //                 tmpx=parseInt(x[0])+parseInt(x[1]);
    //                 temp=tmpx;
    //             }
    //             a[i]=temp;
    //         }
    //         re=a[0];
    //         for (i=1;i<a.length;i++){
    //             if(guocheng.innerText.indexOf('.')){
    //                 a[i]=parseFloat(a[i]);
    //             }else{
    //                 a[i]=parseInt(a[i]);
    //             }
    //             re-=a[i];
    //         }
    //         res.innerText=re;
    //     }else if(guocheng.innerText.indexOf('*')){
    //         a=guocheng.innerText.split("*");
    //         re=1;
    //         for (i=0;i<a.length;i++) {
    //             re*=a[i]
    //         }
    //         res.innerText=re;
    //     }else if(guocheng.innerText.indexOf('/')){
    //         a=guocheng.innerText.split("/");
    //         re=a[0];
    //         for (i=1;i<a.length;i++) {
    //             re*=a[i]
    //         }
    //         res.innerText=re;
    //     }
    // }
</script>
</body>
</html>